<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="add()">新建</a-button>
        </div>
        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="pagination"
          @change="handleTableChange">
          >
          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm
                :title="`确认删除菜单${record.title}及以下的子节点吗?`"
                ok-text="Yes"
                cancel-text="No"
                @confirm="confirm(record)"
                @cancel="cancel"
                arrowPointAtCenter
              >
                <a>删除</a>
              </a-popconfirm>
            </template>
          </span>
        </a-table>
        <add-menu
          ref="createMenu"
          :title="title"
          :visible="visible"
          :loading="confirmLoading"
          :model="mdl"
          @cancel="handleCancel"
          @ok="handleOk"
        />
      </div></a-card
    ></page-header-wrapper>
</template>
<script>
import AddMenu from './modules/AddMenu'
import { addMenu, menuList, editMenu, removeMenu } from '@/api/menu'
const columns = [
  {
    title: '菜单名称',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '路由名称',
    dataIndex: 'name',
    key: 'name',
    width: '12%'
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: '30%',
    key: 'icon'
  },
  {
    title: '组件',
    dataIndex: 'component',
    width: '30%',
    key: 'component'
  }, {
    title: '操作',
    dataIndex: 'action',
    width: '10%',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  inject: ['reload'],
  components: {
    AddMenu
  },
  data () {
    return {
      queryParam: {}, // 查询参数
      pagination: {
        pageSize: 10, // 默认每页显示数量
				showSizeChanger: true, // 显示可改变每页数量
				pageSizeOptions: ['10', '20', '30', '40'], // 每页数量选项
				showTotal: total => `总共 ${total} 条` // 显示总数
      },
      data: [],
      columns,
      title: '',
      visible: false,
       confirmLoading: false,
      mdl: null
    }
  },

  created () {},

  mounted () {
    this.menuList()
  },
  methods: {
    queryMenu () {
      // 查询方法
    },
    handleCancel () {
      this.visible = false
      const form = this.$refs.createMenu.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handleOk () {
      const form = this.$refs.createMenu.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        const role = { ...values }
        const edit = role.key || false // 有key说明是编辑
        if (!errors) {
          if (edit) {
          editMenu(role).then((res) => {
            if (res.code !== 0) {
              this.$message.error(res.message)
              this.confirmLoading = false
            } else {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              this.reload()
              this.$message.success('修改成功')
            }
          }).catch((error) => {
           this.$message.error(error)
          })
        } else {
          addMenu(role).then((res) => {
            if (res.code !== 0) {
              this.$message.error(res.message)
              this.confirmLoading = false
            } else {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              this.reload()
              this.$message.success('新增成功')
            }
          }).catch((error) => {
           this.$message.error(error)
          })
        }
        }
      })
    },
    handleTableChange (pagination, filters, sorter) {
      // 点击分页会触发方法
      console.log(pagination, filters, sorter)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      filters['page'] = pagination.current
      filters['page_size'] = pagination.pageSize
      this.pagination.pageSize = pagination.pageSize
      this.menuList(filters)
    },
    add () {
        this.title = '新增菜单'
        this.mdl = null
        this.visible = true
    },
    menuList (filter = {}) {
      menuList(filter).then(res => {
        if (res.code !== 0) {
          // 请求失败
          this.$message.error(res.message)
        } else {
          this.data = res.data.data
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleEdit (record) {
      this.title = '编辑菜单'
      this.visible = true
      this.mdl = { ...record }
    },
    cancel () {

    },
    confirm (record) {
      removeMenu({ id: record.key }).then((res) => {
      if (res.code !== 0) {
        this.$message.error(res.message)
      } else {
        this.$message.success('删除成功')
        this.reload()
      }
      }).catch((error) => {
      this.$message.error(error)
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
